<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单默认提交</title>
    <script src="jquery.js"></script>
</head>

<body>
    <!-- action:设置表单提交之后的跳转路径
    get请求：请求数据保存在请求行中即网址栏中路径后面直接跟请求数据
    结构：/路径？name = value&name = value
    请求报文：请求行 请求头部 空行 请求体
    post请求：请求数据保存在请求体中
    form:表单提交时自动跳转至其他页面
    -->
    <form action="index.html" method="get" enctype="multipart/form-data">
        <input type="text" name="uname" placeholder="请输入用户名："><br>
        <input type="password" name="password" placeholder="请输入密码:"><br>
        <input type="file" name="photo"><br>
        <input type="submit" value="提交">
    </form>
</body>
<script>
    // AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
    // 在不重载页面的条件下更新页面数据
    $('form').submit(function(ev) {
        ev.preventDefault();
        console.log('已经阻止------')
        var data = new FormData(this);
        // 添加formData对象数据
        data.append('tiem', new Date())
        $.post({
            url: 'index.html',
            data: data,
            procesData: false, //阻止默认的数据内容被准换成字符串，设置什么类型提交什么类型
            contentType: false, //默认内容类型是ulencoded 阻止默认的内容类型设置什么类型，提交什么类型
            success: function(resDate) {
                // 内部参数：服务端返回的响应数据
            }
        })
    })
</script>


</html>